<template>
  <view class="show">
    <view class="show-nav">

      <view class="nav-header">
        <view class="item" @click="changeOption('color')">毛色</view>
        <view class="item" @click="changeOption('type')">种类</view>
      </view>

      <view class="content-mask" v-if="optionsChoose"></view>
      <view class="nav-content" v-if="optionsChoose">
        <view class="content-title">
          {{ optionName }}
        </view>
        <view class="content-options">
          <view 
            class="content-box" 
            v-for="item in optionData" 
            :key="item.value"
          >
            <view 
              class="content" 
              :class="{ optionActive: checkOption(item.value) }" @click="chooseOption(item.value)"
            >
              {{ item.value }}
            </view>
          </view>

          <view class="content-button">
            <view type="default" class="btn-left btn" @click="resetOption">
              重置
            </view>
            <view type="default" class="btn-right btn" @click="acceptOption">
              确定
            </view>
          </view>
        </view>
      </view>

    </view>
    <Card :info="catData"></Card>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, Ref } from 'vue';
import Card from "../../components/Card/card.vue"
import { onLoad } from "@dcloudio/uni-app";

// catData
interface Cat {
  imgurl: string,
  color: string, 
  type: string,
  msg: { key: string, value: string }[];
}
let allCatData: Ref<Cat[]> = ref([]);
let catData: Ref<Cat[]> = ref([]);

onLoad(() => {
  uni.request({
    url: "http://lvris.com:3000/cat",
    method: "GET",
    success(res) {
      console.log("猫咪数据", res);
      allCatData.value = res.data.map((item: any) => {
        return{
          imgurl: item.pic || "../../static/logo.png",
          color: item.typeA || "未知",
          type: item.typeB || "未知",
          content: item.content || "",
          bigimg: item.pic2 || "",
          msg: [{
            key: "名称",
            value: item.name || "未知",
          },{
            key: "毛色",
            value: item.typeA || "未知",
          },{
            key: "类型",
            value: item.typeB || "未知",
          },{
            key: "介绍",
            value: item.content || "暂无",
          }]
        }
      })
      catData.value = allCatData.value;
    }
  })
})


// Type and Color
interface Option { value: string, label: string }
const options: { [key: string]: Option[] } = {
  color: [
    {
      value: "未知",
      label: "未知",
    },
    {
      value: "灰色",
      label: "灰色",
    },
    {
      value: "黑色",
      label: "黑色",
    },
    {
      value: "棕色",
      label: "棕色",
    },
    {
      value: "淡黄色",
      label: "淡黄色",
    },
    {
      value: "灰白黄",
      label: "灰白黄",
    },
    {
      value: "蓝色",
      label: "蓝色",
    },
    {
      value: "白色",
      label: "白色",
    },
  ],
  type: [
    {
      value: "未知",
      label: "未知",
    },
    {
      value: "花猫",
      label: "花猫",
    },
    {
      value: "长毛猫",
      label: "长毛猫",
    },
    {
      value: "三花猫",
      label: "三花猫",
    },
    {
      value: "暹罗猫",
      label: "暹罗猫",
    },
  ],
}

const optionName = ref("");
const optionsChoose = ref(false);           // 是否在选择状态
const hasChoose: Ref<string[]> = ref([]);
const optionData: Ref<Option[]> = ref([]);

function changeOption(name: string) {
  optionsChoose.value = optionsChoose.value == false ? true : false;
  optionData.value = options[name];
  optionName.value = (name == 'type' ? '种类' : '毛色');
}
function checkOption(value:string) {
  return hasChoose.value.includes(value);
}
function chooseOption(value: string) {
  if(hasChoose.value.indexOf(value) == -1) {
      hasChoose.value.push(value);
    } else {
      hasChoose.value = hasChoose.value.filter((item) => {
        return item != value;
      })
    }
}
function resetOption() {
  hasChoose.value = [];
}
// 执行筛选
function acceptOption() {
  optionsChoose.value = false;
  let arr: Cat[] = [];
  if (hasChoose.value.length == 0) {
    catData.value = allCatData.value;
  } else if (optionName.value == "毛色") {
    arr = allCatData.value.filter((item) => {
      return hasChoose.value.includes(item.color);
    });
  } else if (optionName.value == "种类") {
    arr = allCatData.value.filter((item) => {
      return hasChoose.value.includes(item.type);
    });
  }
  if (!arr.length) {
    catData.value = allCatData.value;
  }
  else {
    catData.value = arr;
  }
}
</script>

<style lang="scss" scoped>
.show-nav {
  position: relative;
  height: 100rpx;
  width: 100%;
  background-color: #2b89c5;

  .nav-header {
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100rpx;
    width: 100%;
    color: #ffffff;
    font-size: 29rpx;

    .item {
      height: 100rpx;
      width: 50%;
      line-height: 100rpx;
      text-align: center;
    }

    .iconfont-arrow::after {
      content: "\e760";
      margin-left: 20rpx;
    }
  }

  .content-mask {
    height: 100vh;
    width: 100%;
    background-color: #f2f2f2;
    opacity: 0.5;
  }

  .nav-content {
    position: absolute;
    width: 100%;
    z-index: 5;
    top: 100rpx;
    left: 0;


    .content-title {
      height: 50rpx;
      width: 100%;
      margin: 0 auto;
      font-size: 31rpx;
      padding: 10rpx 10rpx 10rpx 25rpx;
      background-color: #ffffff;
    }

    .content-options {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      margin: 0 auto;
      background-color: #ffffff;

      .content-box {
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 100rpx;
        width: 25%;
        padding: 10rpx;

        .content {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          height: 90%;
          width: 99%;
          background: #f2f2f2;
          font-size: 23rpx;
        }

        .optionActive {
          background-color: #2b89c5 !important;
          color: #ffffff !important;
        }
      }

      .content-button {
        display: flex;
        width: 100%;
        margin-top: 30rpx;

        .btn {
          box-sizing: border-box;
          display: table-cell;
          width: 50%;
          height: 80rpx;
          line-height: 80rpx;
          border: 1rpx solid #000000;
          border-collapse: collapse;
          text-align: center;
          font-size: 30rpx;
        }

        .btn-right {
          border-left: none;
          background-color: #2b89c5;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
